<template>
  <el-dialog v-model="visible" width="550px" class="monthly-target-dialog" @close="handleClose">
    <template #title>
      <div class="dialog-header">
        <span>创建每月业绩目标</span>
      </div>
    </template>

    <el-form :model="form" ref="formRef" label-width="80px" class="dialog-form">
      <!-- 年月选择 -->
      <el-form-item label="选择年月">
        <el-date-picker
          v-model="form.month"
          type="month"
          placeholder="选择年月"
          format="YYYY-MM"
          value-format="YYYY-MM"
          style="width: 100%"
        />
      </el-form-item>

      <!-- 业绩额度 -->
      <el-form-item label="业绩额度">
        <el-input v-model="form.target" type="number" placeholder="请输入业绩额度">
          <template #prefix>
            <span>¥</span>
          </template>
          <template #suffix>
            <span>万</span>
          </template>
        </el-input>
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="目标备注">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" rows="3" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认创建</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

interface FormType {
  month: string;
  target: number | null;
  remark: string;
}

const visible = ref(false);
const formRef = ref<any>(null);

const form = reactive<FormType>({
  month: new Date().toISOString().slice(0, 7),
  target: null,
  remark: ''
});

// 提交逻辑
const handleSubmit = () => {
  if (!form.target) {
    ElMessage.warning('请输入业绩额度');
    return;
  }
  ElMessage.success('创建成功');
  visible.value = false;
};

const handleClose = () => {
  form.month = new Date().toISOString().slice(0, 7);
  form.target = null;
  form.remark = '';
};

// 提供给父组件调用的 show 方法
function show() {
  visible.value = true;
}

defineExpose({ show });
</script>

<style lang="scss">
/* 弹窗整体 */
.monthly-target-dialog {
  border-radius: 12px;
  padding: 0;
  overflow: hidden;

  .el-dialog__header {
    padding-bottom: 0;
    background-color: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
    color: #606266;
  }

  /* 自定义头部 */
  .dialog-header {
    font-size: 18px;
    font-weight: 600;
    padding: 18px 24px;
    width: 100%;
  }

  /* 表单内边距 */
  .dialog-form {
    padding: 24px;
  }

  /* 表单标签样式 */
  .dialog-form .el-form-item__label {
    color: #606266;
    font-weight: 500;
  }

  /* 底部按钮 */
  .dialog-footer {
    padding: 16px 24px;
    text-align: right;
    background-color: #f5f7fa;
    border-top: 1px solid #e4e7ed;
  }

  .dialog-footer .el-button {
    min-width: 90px;
    border-radius: 6px;
  }

  .dialog-footer .el-button--primary {
    background-color: #409eff;
    border-color: #409eff;
  }
}
</style>
